<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 9999"
    >
    </theme-navbar>
    <!-- #endif -->

	<fab-button :content="fContent" @fabtrigger="fabtrigger" />
    <view class="content">
      <!-- 正文内容, 绝对定位处理距离顶部高度 -->
      <view class="case-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
        <u-search
          class="case-search"
          shape="round"
          :clearabled="true"
          :showAction="true"
          :animation="true"
          actionText="确定"
          v-model="keyword"
          @custom="searchClick"
        ></u-search>
      </view>

	  <view style="padding-bottom: 160rpx;">
		<list-view
			:i="0"
			:index="0"
			:top="getListViewTop()"
			:bottom="0"
			:load-data="myLoadData"
			:init-load="false"
			ref="mescrollItem0"
		>

			<template slot-scope="d">
			<u-card :showFoot="false" padding="20" :showHead="false" :border="false" margin="20rpx" border-radius="30" @click="handleCaseClick(d.data)">
				<view slot="body" style="position: relative;">
					<case-info-item class="n-lay" :seal-info="d.data" :flag="true"></case-info-item>
					<view v-if="selectArr.find(item => item.caseUuid == d.data.caseUuid)" class="check-icon" style="position: absolute; right: 5rpx; top: 50%; transform: translateY(-50%);">
						<u-icon name="checkbox-mark" :color="$theme.u_type_primary" size="38" style="margin-right: 10px;"></u-icon>
					</view>
				</view>
			</u-card>
			</template>

		</list-view>
		</view>
    </view>
    <u-popup v-model="caseShow" width="80%" mode="right">
      <view class="cearch_title">
        查询条件
      </view>
      <u-form :model="orgForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 0 32rpx" ref="uForm">
        <u-form-item label="案件类型:" prop="handleProc">
          <dic-input
            :keyWord="$u.dic.DIC_KEYS.C_CASE_TYPE"
            :dicCode="orgForm.handleProc"
            :border="ifborder"
            inputAlign="left"
            type="select"
            :select-open="dicSelectOpen('handleProc',$u.dic.DIC_KEYS.C_CASE_TYPE)"
            placeholder="请选择"
            v-model="orgForm.handleProcName"
            @changeInputModelData="(name)=>{$set(orgForm, 'handleProcName', name)}"
            @click="showDic($u.dic.DIC_KEYS.C_CASE_TYPE,orgForm.handleProc,'handleProc')"
          />
        </u-form-item>
      </u-form>
      <view class="submit-btns btn-other-cls">
        <u-button plain class="del" type="primary" @click="close">
          重置
        </u-button>
        <u-button class="mit" type="primary" @click="selectChange">
          确定
        </u-button>
      </view>
    </u-popup>
    <!-- 下拉选择用 -->
    <dic-choice
      :keyWord="dicKeyWords"
      :currentSelect="dicCurrentSelect"
      v-model="dicShow"
      @confirm="selectDicConfirm"
    ></dic-choice>


	<!-- 底部按钮 -->
	<view class="submit-btns btn-other-cls">
		<u-button class="u-btn" type="primary" @click="handlerSure">
			确定
		</u-button>
	</view>
  </view>
</template>

<script>
	import listView from '@/components/list_view.vue';
	import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
	import CaseInfoItem from './components/caseInfoItem.vue';
	import caseService from '@/service/case/case.service';
	import DicInput from '@/components/dic_input.vue';
	import DicChoice from '@/components/dic_choice.vue';
	import {
		CASE_TYPE,
	} from '@/service/case/mapping/index.js';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			listView,
			CaseInfoItem,
			DicInput,
			DicChoice,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: '',
				requestParam: {
					page: 1,
					limit: 10,
				},
				defaultCaseClue: {},
				orgForm: {},
				// dic_select 是否显示
				dicShow: false,
				// dic 关键字
				dicKeyWords: '',
				// dic 当前选择项
				dicCurrentSelect: '',
				dicType: '',
				// 输入框是否有border
				ifborder: false,
				caseShow: false,
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
				selectArr: [],
				isMultiple: true,
			};
		},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			handleCaseClick(data) {
				if (!this.isMultiple) {
					this.selectArr = [data];
					return;
				}
				if (!!this.selectArr.find(item => item.caseUuid == data.caseUuid)) {
					this.selectArr = this.selectArr.filter(item => item.caseUuid != data.caseUuid);
				} else {
					this.selectArr.push(data);
				}
			},
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight('筛选', () => {
					this.selectCase();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.selectCase();
				}
			},
			selectCase() {
				this.caseShow = true;
			},
			dicSelectOpen(type, keyWords) {
				if (type == this.dicType) {
					if (this.dicKeyWords == keyWords && this.dicShow) {
						return true;
					}
					return false;
				}
			},
			showDic(key, cur, type) {
				if (this.dicShow) return;
				this.dicKeyWords = key;
				this.dicCurrentSelect = cur;
				this.dicShow = true;
				this.dicType = type;
			},
			selectDicConfirm(e) {
				if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_CASE_TYPE) {
					// 未办证原因
					this.orgForm.handleProcName = e[0].label;
					this.orgForm.handleProc = e[0].extra.bcbCode;
				}
			},
			close() {
				this.orgForm = {};
			},
			selectChange() {
				this.caseShow = false;
				// this.searchObj = this.orgForm;
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			//  获取列表距离顶部的高度
			getListViewTop() {
				let p = this.$u.sys().statusBarHeight + uni.upx2px(104) + 'px';
				return p;
			},
			searchClick: function() {
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			// 案件查询数据
			myLoadData(page) {
				let self = this;
				this.requestParam.page = page.num;
				this.requestParam.limit = page.size;
				this.requestParam.caseCode = this.keyword;
				this.requestParam.handleProc = this.orgForm.handleProc || '';
				return new Promise((resolve) => {
					caseService
						.caseList(self.requestParam)
						.then((res) => {
							if (res.success) {
								let arr = res.data;
								arr.forEach((itm) => {
									if (itm.handleProc == CASE_TYPE.SIMPLE && this.$u.test.isEmpty(itm.caseOfAction)) {
										itm.caseOfAction = this.defaultCaseClue.caseProperty;
									}
									self.$set(itm, 'show', false);
								});
								resolve({
									data: {
										list: arr,
										totalCount: res.count,
									},
								});
							} else {
								self.$modal.alert(res.msg);
								resolve({
									data: {
										list: [],
										totalCount: 0,
									},
								});
							}
						})
						.catch((err) => {
							self.$modal.alert(err);
							resolve({
								data: {
									list: [],
									totalCount: 0,
								},
							});
						});
				});
			},
			handlerSure() {
				if (!this.selectArr.length) {
					this.$u.toast("请选择案件!");
					return;
				}
				this.backPrev({
					paramKey: 'selectCase',
					param: this.selectArr,
				});
			}
		},
	};
</script>

<style lang="scss" scoped>

	.page {
		padding: 0;
		//padding-bottom: 50px;
	}

	.content {
		background-color: #f3f4f6;
	}

	.cearch_title {
		background-color: #f3f4f5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.n-lay {
		width: 100%;
		padding: 15rpx;
	}

	.case-search-lay {
		background-color: #fff;
		position: fixed;
		top: 0px;
		z-index: 999;
		width: 100%;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.mc-divider {
		width: 100%;
		height: 10px;
		background-color: $uni-bg-color-grey;
	}

	.case-search {
		// margin-bottom: 20rpx !important;
	}

	.tabs-bottom {
		border-bottom: 2rpx solid $border-color-dark;
	}

	.message-box {
		color: $u-type-primary !important;
	}

	.mescroll {
		margin-bottom: 15px;
	}

	.tabsBottom {}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: 0.8rem;
		color: $u-type-primary;
	}

	.p-item {
		margin: 5px 0px;

		.icon {
			color: #666;
		}

		.text {
			margin-left: 5px;
			color: #333;
		}
	}
</style>
